<template>
  <div :id="id">
    <PartLabel :label="label" class="mb-[20px]" />
    <!-- 六个基础字段 -->
    <div class="keys-list mb-[20px]">
      <LabelValueUnit
        v-for="(item, index) in dataObj.keysList"
        :key="index"
        class="w-1/2"
        :label="item.label"
        :value="item.value"
        :unit="item.unit"
      />
    </div>
    <!-- 土地介绍 -->
    <LabelDesc
      v-if="dataObj.desc"
      :label="descLabel"
      :label-bold="true"
      :desc="dataObj.desc"
      class="mb-[20px]"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import PartLabel from '@/components/portal/PartLabel.vue'
import LabelValueUnit from '@/components/portal/LabelValueUnit.vue'
import LabelDesc from '@/components/portal/LabelDesc.vue'
export default Vue.extend({
  components: { PartLabel, LabelValueUnit, LabelDesc },
  props: {
    descLabel: {
      type: String,
      default: '厂房介绍',
    },
    id: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: 'Part Name',
    },
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
})
</script>
<style lang="scss" scoped>
.keys-list {
  display: flex;
  flex-wrap: wrap;
}
</style>
